<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 6px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div>
            n值是  : <span v-text="n"></span>
        </div>
        <hr>
        <div>
            n值放大是  : <span v-big="n"></span>
        </div>
        <button @click="n++">n++</button>
        <hr>
        <input type="text" v-fbind:value="n">
        <div>
            <!-- 特殊写法 -->
            特殊写法  : <span v-big-number="n"></span>
        </div>
        <div>
            <!-- 错误写法,v-后面都会解析成小写的指令名 -->
            <!-- 错误写法  : <span v-bigNumber="n"></span> -->
        </div>
    </div>

    <div id="root2">
        x值是  : <span v-text="x"></span>
        <!-- 会报错 -->
        <!-- <input type="text" v-fbind:value="x"> -->
        <input type="text" v-fbind2:value="x">
        <div>
            x值放大是  : <span v-fbind3="x"></span>
        </div>
        <button @click="x++">x++</button>

    </div>
    
    <script>
        Vue.config.productionTip = false;
        //全局指令
        Vue.directive('fbind2',{
            //固定写法
            //指令和元素绑定时调用
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在的元素被插入时调用
            inserted(element,binding){
                element.focus()
            },
            //指令所在的元素被重新解析时调用
            update(element,binding){
                element.value = binding.value
            }
        })
        //全局指令
        Vue.directive('fbind3',function(element,binding){
            //操作真实dom
            element.innerText=binding.value*binding.value*10
        })

        new Vue({
            el:'#root',
            data:{
                name:'zzz1',
                n:1
            },
            computed:{
            },
            methods:{
            },
            watch:{
            },
            filters:{
            },
            //局部指令，其他root div不能调用
            directives:{
                //调用时机：1指令和元素绑定成功时，2：指令所在的模板被刷新时
                //传入真实dom和绑定的对象
                big(element,binding){
                    console.log(element,binding)
                    //查看element元素的所有属性和方法
                    console.dir(element)
                    //查看element是否是真实dom
                    console.log(element instanceof HTMLElement)
                    //操作真实dom
                    element.innerText=binding.value*binding.value*10
                    //这里面的this是window，不是vue，所以不能更改其他元素
                    console.log(this)
                    // this.n= binding.value*binding.value*10
                    // this.name = 'aa'
                },
                //问题是初始化页面时，没有focus到input框
                // fbind(element,binding){
                //     element.value = binding.value
                //     // focus是真实dom置入后才能操作。
                //     // 在指令和元素绑定的时候，还是虚拟dom，还没有渲染成真实dom，也就是还没有放入页面
                //     element.focus()
                //     console.log(element,binding)
                // }
                //完整写法
                fbind:{
                    //固定写法
                    //指令和元素绑定时调用
                    bind(element,binding){
                        console.log('fbind-bind',this)
                        element.value = binding.value
                    },
                    //指令所在的元素被插入时调用
                    inserted(element,binding){
                        console.log('fbind-inserted',this)
                        element.focus()
                    },
                    //指令所在的元素被重新解析时调用
                    update(element,binding){
                        console.log('fbind-update',this)
                        element.value = binding.value
                    }
                },
                //特殊写法
                "big-number"(element,binding){
                    element.innerText=binding.value*binding.value*10
                },
                // //错误写法
                // "bigNumber"(element,binding){
                //     element.innerText=binding.value*binding.value*10
                // }
            }
        })
        new Vue({
            el:'#root2',
            data:{
                x:666
            },
            computed:{
            },
            methods:{
            },
            watch:{
            },
            filters:{
            },
            directives:{
            },
        })
    </script>    
</body>
</html>